<script lang="ts" setup>
import { provide } from 'vue';
import { Toast, Toaster, createToaster } from '@ark-ui/vue/toast';
import { toastInjectionKey } from '@/home/utils/keys';

const toaster = createToaster({
  placement: 'top',
  overlap: true,
  offsets: '120px',
});

provide(toastInjectionKey, toaster);
</script>

<template>
  <slot></slot>
  <ClientOnly>
    <Teleport to="body">
      <Toaster :toaster="toaster" v-slot="toast">
        <Toast.Root
          class="min-w-400 flex-y-center gap-x-8 border-1 rounded-4 border-solid px-11 py-13 text-14 leading-20 data-[type=error]:(border-#F8BBB5 bg-#FFE8E6 text-#E24E40) data-[type=success]:(border-#C0E0A0 bg-#E5F6D4 text-#6CAF28)"
        >
          <div class="flex-shrink-0">
            <div class="i-icons:toast-success size-20" v-if="toast.type === 'success'"></div>
            <div class="i-icons:toast-error size-20" v-if="toast.type === 'error'"></div>
          </div>
          <div class="flex-grow">{{ toast.description }}</div>
        </Toast.Root>
      </Toaster>
    </Teleport>
  </ClientOnly>
</template>

<style lang="scss" scoped>
[data-scope="toast"][data-part="root"] {
  z-index: var(--z-index);
  height: var(--height);
  overflow-wrap: anywhere;
  opacity: var(--opacity);
  transition: translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
  transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
  will-change: translate, opacity, scale;
  translate: var(--x) var(--y);
  scale: var(--scale);

  &[data-state="closed"] {
    transition: translate 400ms, scale 400ms, opacity 200ms;
    transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
  }
}

@media (max-width: 640px) {
  [data-scope="toast"][data-part="group"] {
    width: 100%;
  }

  [data-scope="toast"][data-part="root"] {
    inset-inline: 0;
    width: calc(100% - var(--gap) * 2);
  }
}
</style>
